<template>
  <div class="grid-container">
    <div v-for="(item, index) in list" :key="index">{{ item }}</div>
  </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";

const list = reactive(
  Array(100)
    .fill(0)
    .map((_item, index) => index + 1)
);
</script>
<style lang="scss" scoped>
.grid-container {
  box-sizing: border-box;
  padding: 10px;
  display: grid;
  overflow: auto;
  width: 100vw;
  height: 99vh;
  gap: 20px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  & > div {
    background-color: aquamarine;
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 200px;
  }
}
@media screen and (max-width: 480px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 960px) and (min-width: 480px) {
  .grid-container {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 1366px) and (min-width: 960px) {
  .grid-container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
</style>
